import React from 'react';
import { Modal, Form, Input, Select, Switch, InputNumber } from 'antd';
import styles from './index.less';

const Item = Form.Item;
const Option = Select.Option;

@Form.create()
class Components extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formatData: {
        id: null,
      },
    };
  }
  /**
   * 提交表单到父组件
   */
  onOk = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.serverList = values.serverList.join(',');
        values.openState = values.openState ? 1 : 0;
        this.props.submit(values);
      }
    });
  };

  /**
   * 联动
   */
  onChange = e => {
    this.props.form.setFieldsValue({
      checkAddress: e.target.value,
    });
  };

  typeChange = value => {
    this.setState({
      type: value,
    });
  };

  clear = () => {
    this.props.form.resetFields();
  };

  render() {
    const {
      visible,
      formatData,
      close,
      form: { getFieldDecorator },
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    return (
      <Modal
        title="优化管理"
        afterClose={this.clear}
        visible={visible}
        onCancel={close}
        okText="确定"
        cancelText="取消"
        destroyOnClose={true}
        onOk={this.onOk}
      >
        <div className={styles.formWrap}>
          <Form>
            <Item {...formItemLayout} label="域名">
              {getFieldDecorator('domain', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData && formatData.domain,
              })(<Input onChange={this.onChange} />)}
            </Item>
            <Item {...formItemLayout} label="服务列表">
              {getFieldDecorator('serverList', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData ? formatData.serverList.split(',') : [],
              })(
                <Select mode="tags" style={{ width: '100%' }} tokenSeparators={[',']}>
                  {[].map((item, index) => (
                    <Option value={item.id} key={index}>
                      {item.id}
                    </Option>
                  ))}
                </Select>
              )}
            </Item>
            <Item {...formItemLayout} label="健康检查地址">
              {getFieldDecorator('checkAddress', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData && formatData.checkAddress,
              })(<Input readOnly />)}
            </Item>
            <Item {...formItemLayout} label="健康检查间隔">
              {getFieldDecorator('checkInterval', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue:
                  formatData && formatData.checkInterval ? formatData.checkInterval : 10,
              })(<InputNumber style={{ width: '200px' }} min={0} />)}
              <span> 秒</span>
            </Item>
            <Item {...formItemLayout} label="备注">
              {getFieldDecorator('remark', {
                initialValue: formatData && formatData.remark,
              })(<Input.TextArea />)}
            </Item>
            <Item {...formItemLayout} label="启用状态">
              {getFieldDecorator('openState', {
                valuePropName: 'checked',
                initialValue: formatData && formatData.openState ? true : false,
              })(<Switch checkedChildren="开" unCheckedChildren="关" />)}
            </Item>
          </Form>
        </div>
      </Modal>
    );
  }
}

export default Components;
